@use 'sass:color';
@use 'sass:map';
@use '@angular/material' as mat;

@mixin theme($theme) {
  $is-dark-theme: map.get($theme, is-dark);
  $primary: map.get($theme, primary);
  $accent: map.get($theme, accent);
  $background: map.get($theme, background);
  $foreground: map.get($theme, foreground);

  .matero-sidemenu {
    > .menu-item {
      > .menu-heading {
        color: mat.get-color-from-palette($foreground, text);

        &:hover,
        &:focus {
          background: mat.get-color-from-palette($background, hover);
        }
      }

      &.active {
        > .menu-heading {
          color:
            if(
              $is-dark-theme,
              color.adjust(mat.get-color-from-palette($primary), $lightness: 25%),
              mat.get-color-from-palette($accent)
            );
          background-color: if($is-dark-theme, rgba(mat.get-color-from-palette($primary), .15), transparent);

          &:hover,
          &:focus {
            background: mat.get-color-from-palette($background, hover);
          }
        }
      }

      &.expanded {
        background: mat.get-color-from-palette($background, hover);
      }
    }

    &.submenu {
      > .menu-item {
        &.active {
          > .menu-heading {
            background-color: transparent;

            &:hover,
            &:focus {
              background: mat.get-color-from-palette($background, hover);
            }
          }
        }

        &.expanded {
          background: transparent;
        }
      }
    }
  }
}
